<template>
  <!-- 人员参与项目统计 -->
  <div class="app-container">
    <!-- 搜索查询 -->
    <div class="form-container">
      <el-form ref="queryForm" :inline="true" label-width="80px" :model="filters">
        <el-form-item label="项目名称">
          <el-input v-model="filters.name" clearable placeholder="请输入项目名称" size="small" />
        </el-form-item>
        <el-form-item label="时间">
          <label slot="label" v-html="`时&emsp;&emsp;间`" />
          <el-date-picker
            v-model="dateRange"
            size="small"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :clearable="true"
            @change="dateChange"
          />
        </el-form-item>
      </el-form>
    </div>
    <!--操作按钮-->
    <div class="btns-group">
      <el-button v-clickForbidden icon="el-icon-search" size="middle" @click="handleQuery">搜索</el-button>
      <el-button v-clickForbidden icon="el-icon-refresh" size="middle" @click="resetQuery">重置</el-button>
      <el-button v-clickForbidden icon="el-icon-download" size="middle" @click="exportData">导出</el-button>
    </div>
    <!-- 表格展示start -->
    <el-table
      ref="multipleTable"
      v-loading="loading"
      :span-method="objectSpanMethod"
      :data="tableData"
      :row-style="rowClass"
      :summary-method="getSummaries"
      show-summary
      style="width: 100%;"
      stripe
      class="table-list"
    >
      <el-table-column
        prop="loginName"
        label="人员名称"
        :show-overflow-tooltip="true"
        min-width="150"
        align="center"
      />
      <el-table-column
        prop="proCount"
        :show-overflow-tooltip="true"
        label="参与项目数(个)"
        min-width="150"
        align="center"
      />
      <el-table-column
        prop="allProMoney"
        :show-overflow-tooltip="true"
        label="参与总金额(万元)"
        min-width="150"
        align="center"
      >
        <template slot-scope="{row}">
          {{ divideMoney(row.allProMoney,6, true) }}
        </template>
      </el-table-column>
      <el-table-column prop="proName" :show-overflow-tooltip="true" label="项目名称" min-width="150" align="center" />
      <el-table-column prop="proMoney" label="项目产值(万元)" min-width="120" align="center">
        <template slot-scope="{row}">
          {{ divideMoney(row.proMoney,6,true) }}
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格展示end-->
  </div>
</template>

<script>
import { exportUserPro, selectUserPro } from '@/api/statisticalAnalysis/PersonnelParticipation'
import { dataMethod } from '@/utils/tableObjectSpanMethod.js'
import { mapState } from 'vuex'
export default {
  proNum: 'PersonnelParticipation',
  data() {
    return {
      // 筛选条件
      highLevelSet: false, // 高级设置显示隐藏
      dateRange: [], // 时间范围数组
      filters: {
        proNum: '', // 钻机名称
        equipmentModel: '',
        statisticsStartTime: '',
        statisticsEndTime: ''
      },
      /* 列表 start*/
      total: 0, // 分页总条数
      selectRow: [], // 高亮样式
      loading: false, // 列表加载
      spanArr: [],
      tableData: [],
      spanObj: {}
      /* 列表 end*/
    }
  },
  computed: {
    ...mapState({
      needTagsView: (state) => state.settings.tagsView
    }),
    // 高级搜索显示隐藏
    handleTagShow() {
      return this.highLevelSet
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 选择时间
    dateChange(e) {
      this.filters.statisticsStartTime = e[0]
      this.filters.statisticsEndTime = e[1]
    },
    getSummaries(param) {
      const repeatList = []
      const { data } = param
      const proCount = data.reduce((pre, row) => {
        if (repeatList.includes(row.loginName)) return pre
        repeatList.push(row.loginName)
        return pre + row.proCount
      }, 0)
      const total = data.reduce((pre, row) => pre + row.proMoney, 0)
      return ['总计', proCount, this.divideMoney(total, 6, true), '', this.divideMoney(total, 6, true)]
    },
    // 处理表格合并
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 列合并
      const _row = this.spanObj[column.property] ? this.spanObj[column.property][rowIndex] : 1
      const _col = _row > 0 ? 1 : 0
      return {
        rowspan: _row,
        colspan: _col
      }
    },
    // 获取数据
    async getList() {
      const { data } = await selectUserPro(this.filters)
      this.tableData = data
      this.spanObj = dataMethod(this.tableData, ['loginName', 'proCount', 'allProMoney'])
    },
    // list表格填充空白行
    addTaleData() {
      if (this.tableData.length < this.fristPageSize) {
        const arr = {}
        this.tableData.push(arr)
        this.addTaleData()
      }
    },
    // 高亮样式
    rowClass({ row, rowIndex }) {
      if (this.selectRow.includes(rowIndex)) {
        return { 'background-color': 'rgba(185,221,249,.75)' }
      }
    },
    /* 按钮 Start */
    // 搜索方法
    handleQuery() {
      this.filters.pageNum = 1
      this.getList()
    },
    // 重置搜索
    resetQuery() {
      this.resetForm('queryForm')
      this.dateRange = []
      this.filters.statisticsStartTime = ''
      this.filters.statisticsEndTime = ''
      this.handleQuery()
    },
    // 导出
    async exportData() {
      const tableHeader = [
        {
          'key': 'loginName',
          'label': '人员名称'
        },
        {
          'key': 'proCount',
          'label': '参与项目数(个)'
        },
        {
          'key': 'allProMoney',
          'label': '参与总金额(万元)'
        },
        {
          'key': 'proName',
          'label': '项目名称'
        },
        {
          'key': 'proMoney',
          'label': '项目产值(万元)'
        }
      ]
      const res = await exportUserPro(tableHeader)
      if (!res) return
      this.downloadFileFlow(res, '人员参与项目导出')
    }
  }
}
</script>

<style scoped lang="scss">
</style>

